<template>
    <div class="random-box">
        <h2>{{form.name}}</h2>
        <p>随机数最小值:{{form.min}}</p>
        <p>随机数最大值:{{form.max}}</p>
        <p>创建时间:{{form.date}}</p>
        <p>已参加:{{finishNum+1}}/{{form.times}}</p>
        <button @click="onClick" v-if="!randomNum">领随机数</button>
        <h1>{{randomNum}}</h1>
    </div>
</template>
<script>
// import dayjs from 'dayjs'
    export default{
        props:{
             form:Object
        },
        data(){
            return {
               finishNum:0,
               randomNum:0
            }
        },
        methods:{
            onClick(){
                const {min,max}=this.form;  
                const n = Math.ceil(Math.random()*(max-min)+min);
                this.randomNum=n;
                this.finishNum++;
            }
        }
    }
</script>
<style lang="sass">
.random-box 
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #f1f1f1
    z-index:2
    h2,p
        background: #fff
    button 
        position: relative
        left: 50%
        width: 30vw
        line-height: 30vw
        margin-left: -15vw
        text-align: center
        background: #e57664
        border-radius: 50%
        color: #fff
        font-size: 4.6vw
        font-weight: bold
</style>
